<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>07-dataset的演示</title>
</head>
<body>
  <div id="main" style="width: 800px;height:400px;"></div>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
  <script>
    const chartDom = document.getElementById('main')
    const chart = echarts.init(chartDom)
    const option = {
      title: {
        text: 'AAA',
        subtext: 'aaa'
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {},
      dataset: {
        source: [
          ['一季度', 79, 100, '分类1', 50],
          ['二季度', 81, 112, '分类2', 60],
          ['三季度', 88, 96, '分类3', 55],
          ['四季度', 72, 123, '分类4', 70],
        ]
      },
      legend: {
        data: [{
          name: '市场份额',
          // 强制设置图形为圆。
          icon: 'circle',
          // 设置文本为红色
          textStyle: {
            color: 'red'
          }
        }, '利润', '销售'],
        left: 130
      },
      toolbox: {
        feature: {
          dataZoom: {
            yAxisIndex: 'none'
          },
          restore: {},
          saveAsImage: {}
        }
      },
      grid: {
        left: 100,
        right: '20%',
        bottom: 130
      },
      dataZoom: [{
        show: true,
        start: 30,
        end: 70
      }],
      series: [
        { 
          name: '销售',
          type: 'bar',
          encode: { x: 0, y: 1 }
        },
        {
          name: '利润',
          type: 'line',
          encode: { x: 0, y: 2 }
        },
        {
          name: '市场份额',
          type: 'pie',
          radius: 35,
          center: ['60%', 50],
          encode: { itemName: 3, value: 4 }
        }
      ]
    }
    chart.setOption(option)
  </script>
</body>

</html>